<!--
功能：楼层信息,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/1 11:02,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <!--    楼层管理-->
    <div class="floor-header">
      <span>我的楼层</span>
      <el-button type="danger" @click="removeAll">信息记录删除</el-button>
    </div>
    <div class="floor-page">
      <div class="page"
           v-for="f in floor"
           :key="f.id"
           @click="handle(f)">
        <i class="el-icon-office-building"></i>
        <p>名称:{{ f.name }}</p>
        <p>最大人数:{{ f.most }}</p>
      </div>
    </div>
    <!--    房间管理 详情信息查看-->
    <div class="floor-details">
      <div class="details-over" v-if="floorName==''">
        <span><i class="el-icon-school"></i></span>
        <span>内容为空</span>
        <span>......</span>
      </div>
      <div class="details-page" v-if="!floorName==''">
        <div class="page-name">{{ floorName }}</div>
        <div class="page-main">
          <!--          左边显示楼层的房间-->
          <div class="page-main-left">
            <div class="page-no" v-if="room.length==0">该楼层无房间！</div>
            <div class="left-room"
                 v-for="r in room"
                 :key="r.id"
                 :class="op3==r.id? 'bgc':''"
                 @click="seekUser(r)">
              {{ r.name }}
            </div>
          </div>
          <!--          右边显示选中的房间的人员-->
          <div class="page-main-right">
            <div class="page-no" v-if="userList.length==0">该房间无学员！</div>
            <div class="right-userList" v-for="u in userList" :key="u.phone">
              <span>姓名：{{ u.name }}</span>
              <span>电话：{{ u.phone }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {message,confirm} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Floor",
  data() {
    return {
      over: true,
    };
  },
  components: {},
  computed: {
    ...mapState(["floor", "room", "floorName","op3","userList"])
  },
  mounted() {
  },
  methods: {
    removeAll(){
    //  仅有超级管理员才可以删除记录
      confirm("你确定要清除所有的数据？",this.clearAll)
    },
    clearAll(){
      this.$http.get('removeAll/all').then(response => {
        if (response.data){
          message("success","成功")
        }else {
          message("error","部分数据删除失败！")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    },
    seekUser(room) {
      //  查询这个房间中的所有学员信息
      this.$store.commit("setUserList",room.userList)
      this.$store.commit("setOp3",room.id)
    },
    handle(f) {
      //删除以前的学院信息
      this.$store.commit("setUserList",[])
      this.$store.commit("setOp3",0)
      //根据点击的楼层查询对应的房间以及每个房间的信息
      this.$http.get('root/room/' + f.id).then(response => {
        if (response.data) {
          this.$store.commit("setRoom", response.data)
          this.over = false
          this.$store.commit("setFloorName", f.name)
          message("success", "查询成功")
        } else {
          message("error", "未知的错误")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>


.btn{
  background-color: red;
}


.page-name{
  border-bottom: 2px solid #909399;
}

/*详情信息查看*/
.page-main {
  min-height: 365px;
  display: flex;
}

.page-main-left {
  flex: 1;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  /*border-right: 4px solid #6E6E6E;*/
}

.page-main-right {
  flex: 2;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
}

.right-userList {
  background-color: #F3F3F3;
  margin-bottom: 10px;
  font-size: 20px;
  width: 250px;
  height: 250px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  color: #000000;
  transition: all .5s;
}
.right-userList:hover{
  color: #ffffff;
  background-color: #6E6E6E;
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
}
.right-userList span{
  margin: 5px 0;
}

.left-room {
  font-size: 20px;
  width: 85px;
  height: 25px;
  cursor: pointer;
  border-radius: 10px;
  transition: all .3s;
  background-color: #F3F3F3;
}
.bgc{
  background-color: #6E6E6E;
}
.left-room:hover{
  background-color: #6E6E6E;
}


.floor-details {
  width: 100%;
  min-height: 400px;
  margin-top: 50px;
  position: relative;
}

.details-page {
  font-size: 25px;
  text-align: center;
}

.details-over {
  height: 400px;
  font-size: 20px;
  letter-spacing: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/**/

/*楼层列表*/
.floor-page {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.page {
  height: 200px;
  width: 200px;
  cursor: pointer;
  border-radius: 8px;
  transition: all .5s;
  background-color: #F3F3F3;
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 4px;
  font-size: 20px;
}

.page:hover {
  background-color: #6E6E6E;
  color: #ffffff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}


/**/

/*楼层信息*/
.floor-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  height: 50px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border-bottom: 2px dotted #6E6E6E;
  /*background-color: pink;*/
}

.sp1 {
  color: #4F5053;
  font-size: 20px;
}

/**/
</style>
